<template>
    <div class="container">
        <div class="flex-container">
            <div class="flex-item">
                <el-button @click="eventClickAddOperate">添加消息</el-button>
            </div>
        </div>
        <el-table v-loading="dataset.loading" :data="dataset.items.data" class="el-mb-15" stripe>
            <el-table-column prop="title" label="公告标题"/>
            <el-table-column prop="info" label="公告详情"/>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button
                        @click.native.prevent="eventClickDeleteOperate(scope.row, scope.$index)"
                        type="text" size="small"
                    >删除
                    </el-button>
                    <!--                        <el-button-->
                    <!--                            @click.native.prevent="eventClickEditOperate(scope.row, scope.$index)"-->
                    <!--                            type="text" size="small"-->
                    <!--                        >编辑</el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="eventUpdateRequestLimit" @current-change="controllerRequestListDataset"
            :current-page="dataset.page" :page-size="dataset.limit" :total="dataset.total"
            :page-sizes="[10, 50, 100, 200, 300]"
            layout="total, sizes, prev, pager, next, jumper"
        />
        <el-drawer :visible.sync="drawer.show" direction="ltr" size="60%">
            <el-form :model="forma" ref="forma" :rules="formaRules" label-position="left" label-width="8rem"
                     class="auxiliary-notice">
                <el-form-item label="系统公告" prop="title">
                    <el-input v-model="forma.title" v-loading="drawer.editLoading" placeholder="请输入系统公告"/>
                </el-form-item>
                <el-form-item label="公告内容" prop="content">
                    <el-input v-model="forma.content" v-loading="drawer.editLoading" type="textarea" :rows="6"
                              placeholder="请输入公告内容"/>
                </el-form-item>
                <el-form-item>
                    <el-button @click="eventClickSubmitOperate" :loading="drawer.loading">保存</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<script>
    import {
        Table, TableColumn, Pagination,
        Form, FormItem, Input, Button,
        Select, Option,
        Drawer, Dialog,
        MessageBox, Message
    } from 'element-ui';

    export default {
        components: {
            [Table.name]: Table, [TableColumn.name]: TableColumn, [Pagination.name]: Pagination,
            [Button.name]: Button, [Select.name]: Select, [Option.name]: Option,
            [Drawer.name]: Drawer, [Dialog.name]: Dialog,
            [Form.name]: Form, [FormItem.name]: FormItem, [Input.name]: Input, [Button.name]: Button
        },
        data() {
            return {
                forma: {
                    idx: null,
                    title: '',
                    content: ''
                },
                formaRules: {
                    title: [
                        {required: true, message: "请设置系统公告", trigger: "blur"}
                    ],
                    content: [
                        {required: true, message: "请设置公告内容", trigger: "blur"}
                    ]
                },
                dataset: {
                    loading: false,
                    total: 0, limit: 10, page: 1,
                    items: []
                },
                drawer: {
                    show: false, loading: false, editLoading: false,
                    handle: {}
                }
            }
        },
        mounted() {
            this.controllerRequestListDataset();
        },
        methods: {
            controllerRequestListDataset(page) {
                if (this.dataset.loading) return; else this.dataset.loading = true;
                if (page) this.dataset.page = page;
                var url = '/api/admin/Message/getlist';
                var params = {
                    page: this.dataset.page - 1, list_rows: this.dataset.limit,
                    type: 0
                };
                this.$util.postRequestInterface(url, params, {
                    success: (res) => {
                        this.dataset.total = res.data.count;
                        this.dataset.items = res.data;
                    },
                    complete: (e) => {
                        this.dataset.loading = false;
                    }
                });
            },
            eventUpdateRequestLimit(limit) {
                if (this.dataset.loading) return;

                this.dataset.limit = limit;
                this.dataset.page = 1;
                this.dataset.total = 0;

                this.controllerRequestListDataset();
            },
            eventClickDeleteOperate(item, index) {
                var url = '/api/admin/message/delete',
                    params = {
                        id: item.id
                    };
                this.$util.postRequestInterface(url, params, {
                    success: (res) => {
                        this.dataset.page = 1;
                        this.dataset.total = 0;
                        this.dataset.items = [];
                        this.controllerRequestListDataset();
                    },
                    complete: (e) => {
                        this.dataset.loading = false;
                    }
                });
            },
            eventClickEditOperate(item, index) {
                this.forma.idx = index;
                this.forma.title = item.title;
                this.forma.content = item.info;
                this.drawer.show = true;
            },
            eventClickAddOperate() {
                this.drawer.show = true;
                this.forma.idx = null;
                this.forma.title = '';
                this.forma.content = '';
            },
            eventClickSubmitOperate() {
                this.drawer.loading = true;

                this.$refs["forma"].validate((valid) => {
                    if (valid) {
                        if (this.forma.idx == null) {
                            this.$util.postRequestInterface('/api/admin/message/add', {
                                title: this.forma.title, info: this.forma.content,
                                type: 0, utype: 1
                            }, {
                                success: (res) => {
                                    this.dataset.page = 1;
                                    this.dataset.total = 0;
                                    this.dataset.items = [];
                                    this.controllerRequestListDataset();

                                    Message.success("操作成功");
                                },
                                complete: (e) => {
                                    this.drawer.loading = false;
                                }
                            });
                        } else {
                            this.$util.postRequestInterface('/api/admin/message/change', {
                                title: this.forma.title, info: this.forma.content,
                                type: 0, utype: 1,
                                token: this.$store.state.options.user.token
                            }, {
                                success: (res) => {
                                    let index = this.forma.idx;
                                    this.dataset.items[index].title = this.forma.title;
                                    this.dataset.items[index].info = this.forma.content;

                                    Message.success("修改成功");
                                },
                                complete: (e) => {
                                    this.drawer.loading = false;
                                }
                            });
                        }
                    } else {
                        this.drawer.loading = false;
                    }
                });
            }
        },
        watch: {}
    }
</script>

<style lang="scss" scoped>
    .auxiliary-notice {
        margin: 3.2rem;
    }
</style>
